iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
0
Modern Web

每日挖個坑,用坑填起耍廢聊天室!系列 第 29

二十九號坑,跟socket說掰掰-disconnect

  • 分享至 

  • xImage
  •  

30天要到最後了!!!!!就來用socket disconnect做結束吧!

既然有登入,那就要有登出的更新吧~我原本沒看文件的時候想說在vue被destroy之前發送一個事件來做登出,但如果是直接把瀏覽器分頁關掉,就沒有發送到事件QQ

後來看到socket自己有disconnect可以用

  • socket
    用法就跟其他on事件一樣,只是它就固定叫做disconnect,然後就可以在裡面做斷線後要處理的事情,不過這個就沒有辦法傳資料進去
socket.on("disconnect", () => {
    // ...
});

登出後更新線上人列表

之前的login有另外記資料 匿名登入篇

const members = {}; 
const socketId = socket.id;

socket.on("login", (memberData, fn) => {
    const memberId = memberData.memberId;
    members[socketId] = memberData; // 把登入人的資料記起來
    members[socketId].socketId = socketId;
    fn();
    io.emit("uploadMember", members); // 更新sidebar的線上人列表
});

最後在斷線後刪除斷線人的資料,然後更新線上列表

socket.on("disconnect", () => {
    delete members[socketId];
    io.emit("uploadMember", members);
});

這樣就可以即時更新離線人的資料嚕~


上一篇
二十八號坑,阻擋直接用網址進來的傢伙-asyncData&fetch
下一篇
最後一坑,菜呱封坑~
系列文
每日挖個坑,用坑填起耍廢聊天室!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
ckchuang
iT邦新手 4 級 ‧ 2019-10-15 12:19:44

有 demo 可以玩嗎 /images/emoticon/emoticon31.gif

雖然我的記帳也都沒做部署 XD

看更多先前的回應...收起先前的回應...

我也沒部署QQ 還要研究一下怎麼部署QQ

求大大部署教學~~XD

ckchuang iT邦新手 4 級 ‧ 2019-10-15 14:25:25 檢舉

不4大大~ 這還真要研究一下,當初那個猜數字的也是沒部署,靠大大後面的部署番外篇了 XD

https://zh.nuxtjs.org/faq/heroku-deployment/

照著做就部署好惹,完全不用研究

ckchuang iT邦新手 4 級 ‧ 2019-10-29 21:38:39 檢舉

太強啦!有網址可以玩嗎~~

大家一起來開房間 (X

我要留言

立即登入留言